<template>
    <div class="questionBankHomeView">
        <div class="questionBankHomeViewContent">
            <!-- 精选试题 -->
            <div class="questionBankBox">
                <div class="questionBankBoxHeader">
                    <!-- 头部选项 -->
                    <div class="headerOptions">
                        <div class="headerOption"
                            :class="{ 'selected': questionBanPage == questionBanPageType.carefullyChosen }"
                            @click="questionBanView(questionBanPageType.carefullyChosen)">
                            精选试题
                        </div>
                        <div class="headerOption"
                            :class="{ 'selected': questionBanPage == questionBanPageType.practicePlan }"
                            @click="questionBanView(questionBanPageType.practicePlan)">
                            刷题计划
                        </div>
                        <div class="headerOption"
                            :class="{ 'selected': questionBanPage == questionBanPageType.practiceRecord }"
                            @click="questionBanView(questionBanPageType.practiceRecord)">
                            刷题记录
                        </div>
                    </div>
                    <!-- 头部按钮 -->
                    <div class="headerButtons">
                        <!-- <div class="button" @click="TopicSelectionInstall">
                            <span class="iconfont icon-likesprogramshezhi"></span>
                            选题设置
                        </div> -->
                        <!-- <div class="button" @click="questionBankManagement">
                            <span class="iconfont icon-likesprogramjubao"></span>
                            我的笔记
                        </div> -->
                    </div>
                </div>
                <!-- 精选试题内容 -->
                <div class="carefullyChosenContent">
                    <!-- 精选试题 -->
                    <CarefullyChosen v-if="questionBanPage == questionBanPageType.carefullyChosen" />
                    <!-- 刷题计划 -->
                    <PracticePlan v-if="questionBanPage == questionBanPageType.practicePlan" />
                    <!-- 刷题记录 -->
                    <PracticeRecord v-if="questionBanPage == questionBanPageType.practiceRecord" />
                </div>
            </div>
            <!-- 题库盒子 -->
            <div class="questionBankBox list">
                <!-- 盒子头 -->
                <div class="questionBankBoxHeader">
                    <!-- 头部选项 -->
                    <div class="headerOptions">
                        <!-- <div class="headerOption"
                        :class="{ 'selected': questionBanListPage == questionBanListPageType.allQuestionBan }"
                        @click="questionBanListView(questionBanListPageType.allQuestionBan)">
                            全部
                        </div> -->
                        <div class="headerOption"
                            :class="{ 'selected': questionBanListPage == questionBanListPageType.courseQuestionBan }"
                            @click="questionBanListView(questionBanListPageType.courseQuestionBan)">
                            课程题库
                        </div>
                        <div class="headerOption"
                            :class="{ 'selected': questionBanListPage == questionBanListPageType.competitionQuestionBan }"
                            @click="questionBanListView(questionBanListPageType.competitionQuestionBan)">
                            竞赛题库
                        </div>
                    </div>
                    <!-- 头部按钮 -->
                    <div class="headerButtons">
                        <div class="button success" @click="randomCheck">
                            <span class="iconfont icon-likesprogrampinggu"></span>
                            智能练习
                        </div>
                        <!-- <div class="button success" @click="ranDeepseek">
                            <span class="iconfont icon-likesprogrampinggu"></span>
                            AI问答
                        </div> -->
                    </div>
                </div>
                <!-- 题库列表内容 -->
                <div class="questionBankListContent">
                    <!-- 表格 -->
                    <div class="questionBankListTable">
                        <!-- 表头 -->
                        <div class="tableHeader">
                            <div class="tableColumn">
                                <div class="topicId" @click="tableSortChange('id')">
                                    编号
                                    <div class="tableSort"
                                        :class="{ 'upward': idSort == tableSort.asc, 'downward': idSort == tableSort.desc }">
                                        <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                        <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="tableColumn maxColumn">
                                <div class="topicInfo"
                                    v-if="questionBanListPage == questionBanListPageType.courseQuestionBan">
                                    测验/试卷
                                </div>
                                <div class="topicInfo" v-else>
                                    题目
                                </div>
                            </div>
                            <div class="tableColumn"
                                v-if="questionBanListPage == questionBanListPageType.competitionQuestionBan">
                                题目类型
                            </div>
                            <!-- <div class="tableColumn" v-else>
                                类型
                            </div> -->
                            <div class="tableColumn" @click="tableSortChange('difficulty')">
                                难度
                                <div class="tableSort"
                                    :class="{ 'upward': difficultySort == tableSort.asc, 'downward': difficultySort == tableSort.desc }">
                                    <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                    <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                                </div>
                            </div>
                            <div class="tableColumn" @click="tableSortChange('accuracy')">
                                正确率
                                <div class="tableSort"
                                    :class="{ 'upward': accuracySort == tableSort.asc, 'downward': accuracySort == tableSort.desc }">
                                    <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                    <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                                </div>
                            </div>
                            <div class="tableColumn" @click="tableSortChange('challengeNum')">
                                <div v-if="questionBanListPage == questionBanListPageType.courseQuestionBan">做题人数</div>
                                <div v-else>挑战人数</div>
                                <div class="tableSort"
                                    :class="{ 'upward': challengeNumSort == tableSort.asc, 'downward': challengeNumSort == tableSort.desc }">
                                    <span class="iconfont upwardIconfont icon-likesprogramxiangyouxiayiye"></span>
                                    <span class="iconfont downIconfont icon-likesprograma-shangyiye1"></span>
                                </div>
                            </div>
                            <div class="tableColumn"></div>
                        </div>
                        <!-- 表格行 -->
                        <div class="tableRow" v-for="(topic, index) in questionBanList" :key="index">
                            <div class="tableColumn">
                                <div class="topicId">{{ topic.exercisesId }}</div>
                            </div>
                            <div class="tableColumn maxColumn">
                                <div class="topicInfo">
                                    <div class="topicName">
                                        <!-- 判断题目是否已经完成 -->
                                        <!-- 题目已完成完成 -->
                                        <!-- <span v-if="topic.answerStatuus"
                                            class="iconfont success icon-likesprogramqiyong"></span> -->
                                        <!-- 题目写错了 -->
                                        <!-- <span v-else-if="topic.answerStatuus"
                                            class="iconfont wrong icon-likesprogramcancel"></span> -->
                                        <!-- 题目未完成 -->
                                        <!-- <span v-else class="iconfont icon-likesprogramtingyong"></span> -->
                                        <div v-html="topic.title" class="topicNameText"></div>
                                    </div>
                                    <!-- 判断是否关联课程 -->
                                    <div v-if="topic.courseInfo" class="courseInfoBox">
                                        <div class="courseInfo">
                                            <span class="title">关联课程</span>
                                            <span class="courseName" @click="openCourse(topic.courseInfo.courseId)">
                                                {{ topic.courseInfo.courseName }}
                                            </span>
                                        </div>
                                        <div class="courseInfo" v-if="topic.chapterInfo">
                                            <span class="title">章节</span>
                                            <span class="chapterName"
                                                @click="openCourseChapter(topic.courseInfo.courseId, topic.chapterInfo.chapterId)">
                                                {{ topic.chapterInfo.chapterName }}
                                            </span>
                                        </div>
                                    </div>
                                    <div v-else class="courseInfoBox">
                                        <span class="competition">{{ '竞赛题' }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="tableColumn"
                                v-if="questionBanListPage == questionBanListPageType.competitionQuestionBan">
                                <div class="topicType">{{ topic.exerciseType }}</div>
                            </div>
                            <div class="tableColumn">
                                <div class="topicDifficulty" :class="getTopicDifficulty(topic.difficultyText)">{{
                                    topic.difficultyText }}</div>
                            </div>
                            <div class="tableColumn">
                                <div class="topicAccuracy">{{ topic.accuracy ? topic.accuracy : 0 }}%</div>
                            </div>
                            <div class="tableColumn">
                                <div class="topicChallengeNum">{{ topic.challengeNum }}</div>
                            </div>
                            <div class="tableColumn">
                                <div class="topicAction" @click="startChallenge(topic.exercisesId, 'courseQuestionBan')"
                                    v-if="questionBanListPage == questionBanListPageType.courseQuestionBan">开始做题</div>
                                <div class="topicAction"
                                    @click="startChallenge(topic.exercisesId, 'competitionQuestionBan')" v-else>开始挑战
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <Pagination ref="questionBanPagination"
                        style="margin-top: 15px; display: flex; justify-content: center;"
                        v-model:currentPage="currentPage" v-model:pageSize="pageSize" v-model:total="total"
                        @updateData="(_courrentPage, _pageSize) => { currentPage = _courrentPage; pageSize = _pageSize; getQuestionList(); }" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import CarefullyChosen from '@/components/questionBank/CarefullyChosen.vue';
import PracticePlan from '@/components/questionBank/PracticePlan.vue';
import PracticeRecord from '@/components/questionBank/PracticeRecord.vue';
import Pagination from '@/components/Pagination.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { QuestionBankApi } from "@/api/QuestionBank/QuestionBank.ts";
import { questionBanListType, QuestionListQueryParams } from '@/types/QuestionBankType';
import { useQuestionBankDataStore } from '@/store/modules/questionBank/questionbankdata.ts'
import { t } from '@wangeditor/editor';
export default {
    name: 'questionBankHomeView',
}


</script>

<script setup lang="ts">
// 题目列表
const questionBanList = ref<questionBanListType[]>([]);
// 路由
const router = useRouter();
// 使用pinia 存储题库列表数据
const questionStore = useQuestionBankDataStore();


//分页数据
const questionBanPagination = ref();
const currentPage = ref(1);
const pageSize = ref(11);
const total = ref(0);

// 页面类型
enum questionBanPageType {
    carefullyChosen = 'carefullyChosen', // 精选试题
    practicePlan = 'practicePlan',       // 刷题计划
    practiceRecord = 'practiceRecord'    // 刷题记录
}
// 题库列表页面类型
enum questionBanListPageType {
    // allQuestionBan = 'allQuestionBan',             // 全部题库  
    courseQuestionBan = 'courseQuestionBan',          // 课程题库
    competitionQuestionBan = 'competitionQuestionBan' // 竞赛题库
}

// 精选试题页面
const questionBanPage = ref<questionBanPageType>(questionBanPageType.carefullyChosen);
// 题库列表页面
const questionBanListPage = ref<questionBanListPageType>(questionBanListPageType.courseQuestionBan);
// 切换页面
const questionBanView = (pageType: questionBanPageType) => {
    questionBanPage.value = pageType;
}
// 切换题库列表页面
const questionBanListView = (pageType: questionBanListPageType) => {
    questionBanListPage.value = pageType;
    // 获取题库列表数据
    getQuestionList();
}

// 定义题库状态类型
enum topicStatus {
    incomplete = 'incomplete', // 未完成
    success = 'success',       // 已完成
    wrong = 'wrong',           // 错误
}

// 选题设置
// const TopicSelectionInstall = () => {
//     alert('选题设置');
// }

// 随机检测
const randomCheck = () => {
    // alert('随机检测');
    router.push({ name: 'questionBankExplanation' });
}

// 题库管理
const questionBankManagement = () => {
    alert('题库管理');
}

// 排序
enum tableSort {
    asc = 'ASC', // 升序
    desc = 'DESC' // 降序

}
enum tableSortNames {
    id = 'exercises_id', // 升序
    difficulty = 'difficulty', // 降序
    accuracy = 'accuracy',
    challengeNum = 'challenge_num'
}
const tableSortName = ref(tableSortNames.id);
const tableSortType = ref(tableSort.asc);
// ID排序
const idSort = ref(tableSort.asc);
// 难度排序
const difficultySort = ref(tableSort.asc);
// 正确率排序
const accuracySort = ref(tableSort.asc);
// 挑战数排序
const challengeNumSort = ref(tableSort.asc);


// 排序改变
const tableSortChange = (Change: String) => {

    switch (Change) {
        case 'id':
            tableSortName.value = tableSortNames.id;
            difficultySort.value = tableSort.asc;
            accuracySort.value = tableSort.asc;
            challengeNumSort.value = tableSort.asc;
            idSort.value = idSort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
            tableSortType.value = idSort.value;
            break;
        case 'difficulty':
            tableSortName.value = tableSortNames.difficulty;
            idSort.value = tableSort.asc;
            accuracySort.value = tableSort.asc;
            challengeNumSort.value = tableSort.asc;
            difficultySort.value = difficultySort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
            tableSortType.value = difficultySort.value;
            break;
        case 'accuracy':
            tableSortName.value = tableSortNames.accuracy;
            idSort.value = tableSort.asc;
            difficultySort.value = tableSort.asc;
            challengeNumSort.value = tableSort.asc;
            accuracySort.value = accuracySort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
            tableSortType.value = accuracySort.value;
            break;
        case 'challengeNum':
            tableSortName.value = tableSortNames.challengeNum;
            idSort.value = tableSort.asc;
            difficultySort.value = tableSort.asc;
            accuracySort.value = tableSort.asc;
            challengeNumSort.value = challengeNumSort.value == tableSort.asc ? tableSort.desc : tableSort.asc;
            tableSortType.value = challengeNumSort.value;
            break;
    }
    // 获取题目列表
    getQuestionList();
}

// 打开课程
const openCourse = (courseId: number) => {
    alert('打开课程' + courseId);
}

// 打开课程章节
const openCourseChapter = (courseId: number, chapterId: number) => {
    alert('打开课程' + courseId + '章节' + chapterId);
}

// 开始挑战或开始做题
const startChallenge = (topicId: number, actionType: string) => {
    // console.log('开始挑战, 题目' + topicId);

    // 找到对应 topicId 的题目
    const question = questionBanList.value.find((q) => q.exercisesId === topicId);
    console.log("对应 topicId 的题目" + question.exercisesId);

    if (question) {
        // 将当前题目存储到 Pinia store 中
        questionStore.setQuestionBankData(question);
        // console.log(1);

    } else {
        console.error('未找到题目:', topicId);
    }

    // 根据 actionType 跳转到不同的路由
    if (actionType === 'courseQuestionBan') {
        // 跳转到做题的路由
        router.push({ name: 'questionBankRandomQuiz', params: { topicId } });
        // console.log();
    } else if (actionType === 'competitionQuestionBan') {
        // 跳转到挑战的路由
        router.push({ name: 'questionBankDetails', params: { topicId } });
    }
};

// 判断难度属性样式
const getTopicDifficulty = (difficulty: string) => {
    switch (difficulty) {
        case '简单':
            return 'simple';
        case '中等':
            return 'medium';
        case '困难':
            return 'difficulty';
        default:
            return 'simple';
    }
}

// 获取题库列表·
const getQuestionList = async () => {
    console.log("获取题目列表");

    // 构造请求参数
    // 构造请求参数
    const params: QuestionListQueryParams = {
        sort: {
            sortName: tableSortName.value,
            sortType: tableSortType.value
        },
        type: questionBanListPage.value,
        currentPage: currentPage.value,
        pageSize: pageSize.value
    };

    // 根据题库类型设置请求参数
    switch (questionBanListPage.value) {
        case questionBanListPageType.courseQuestionBan:
            params.type = "course"; // 假设课程题库类型为 "course"
            break;
        case questionBanListPageType.competitionQuestionBan:
            params.type = "competition"; // 假设竞赛题库类型为 "competition"
            break;
        default:
            console.warn("未知的题库类型");
            return;
    }
    console.log("请求参数:", params);

    try {
        // 调用后端接口
        const result = await QuestionBankApi.getQuestionBankList(params);
        if (result.code === 200) {
            questionBanList.value = result.data.list; // 更新题目列表
            currentPage.value = result.data.pageNum;
            pageSize.value = result.data.pageSize;
            total.value = result.data.total;
            console.log("获取题目列表成功:", result.data);
            console.log("获取题目列表成功:", questionBanList.value);
        } else {
            console.error("获取题目列表失败", result.message);
        }
    } catch (error) {
        console.error("请求失败", error);
    }
};
onMounted(() => {
    // 获取题目列表
    getQuestionList();
});
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.questionBankHomeView {
    width: var(--width);
    height: 100%;
    padding: 20px 0px;

}

.questionBankHomeViewContent {
    padding-bottom: 1px;
}

/* 题库盒子 */
.questionBankBox {
    width: 100%;
    border-radius: 10px;
    padding: 20px;
    padding-top: 0px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
}

/* 题库盒子头部 */
.questionBankBox .questionBankBoxHeader {
    width: 100%;
    font-size: 16px;
    padding-top: 10px;
    height: 60px;
    border-bottom: 1px solid rgba(200, 200, 200, .5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 题库盒子头部 */
.questionBankBox .questionBankBoxHeader .headerOptions {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 头部选项 */
.questionBankBox .questionBankBoxHeader .headerOptions .headerOption {
    padding: 0px 10px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    transition: .3s all;
}

/* 选中 */
.questionBankBox .questionBankBoxHeader .headerOptions .headerOption:hover,
.questionBankBox .questionBankBoxHeader .headerOptions .headerOption.selected {
    color: rgba(65, 185, 255, 1);
}

.questionBankBox .questionBankBoxHeader .headerOptions .headerOption::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    transition: .3s all;
    background-color: rgba(65, 185, 255, 1);
}

.questionBankBox .questionBankBoxHeader .headerOptions .headerOption:hover::after,
.questionBankBox .questionBankBoxHeader .headerOptions .headerOption.selected::after {
    width: 55%;
}

/* 头部按钮 */
.questionBankBox .questionBankBoxHeader .headerButtons {
    min-width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.questionBankBox .questionBankBoxHeader .headerButtons .button {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s all;
    cursor: pointer;
}

.questionBankBox .questionBankBoxHeader .headerButtons .button .iconfont {
    font-size: 18px;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.questionBankBox .questionBankBoxHeader .headerButtons .button:hover {
    background-color: rgba(65, 185, 255, .8);
}

.questionBankBox .questionBankBoxHeader .headerButtons .button:active {
    background-color: rgba(65, 185, 255, .65);
    transition: .1s all;
}

.questionBankBox .questionBankBoxHeader .headerButtons .button.success {
    background-color: rgba(103, 194, 58, 1);
}

.questionBankBox .questionBankBoxHeader .headerButtons .button.success:hover {
    background-color: rgba(103, 194, 58, .8);
}

.questionBankBox .questionBankBoxHeader .headerButtons .button.success:active {
    background-color: rgba(103, 194, 58, .65);
}

/* 精选试题内容 */
.carefullyChosenContent {
    width: 100%;
    margin-top: 15px;
    height: 200px;
}

/* 题库列表内容 */
.questionBankListContent {
    width: 100%;
    margin-top: 15px;
    /* background-color: aqua; */
}

/* 题库列表表格 */
.questionBankListContent .questionBankListTable {
    width: 100%;
    height: 945px;
}

/* 表格头部 */
.questionBankListContent .questionBankListTable .tableHeader {
    font-size: 16px;
    height: 45px;
    font-weight: bold;
}

/* 表格行 */
.questionBankListContent .questionBankListTable .tableHeader,
.questionBankListContent .questionBankListTable .tableRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s all;
}

/* 表格列 */
.questionBankListContent .questionBankListTable .tableColumn {
    min-width: 120px;
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.questionBankListContent .questionBankListTable .tableColumn.maxColumn {
    width: 100%;
    justify-content: flex-start;
}

.questionBankListContent .questionBankListTable .tableRow:hover {
    background-color: rgba(200, 200, 200, .2);
}

/* 表格排序 */
.tableSort {
    width: 20px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tableSort .iconfont {
    font-size: 12px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 200, 200, 1);
    /* 旋转 */
    transform: rotate(-90deg);
    cursor: pointer;
}

.tableSort.upward .upwardIconfont {
    color: rgba(65, 185, 255, 1);
}

.tableSort.downward .downIconfont {
    color: rgba(65, 185, 255, 1);
}

/* 题目Id */
.topicId {
    width: 100%;
    padding: 0px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 题目消息 */
.topicInfo {
    width: 100%;
}

/* 题目名称 */
.topicInfo .topicName {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 题目 完成图标 */
.topicInfo .topicName .iconfont {
    font-size: 20px;
    margin-right: 10px;
    color: rgba(100, 100, 100, .5);
}

.topicInfo .topicName .iconfont.wrong {
    color: rgba(246, 70, 0, 1);
}

.topicInfo .topicName .iconfont.success {
    color: rgba(65, 185, 255, 1);
}

/* 题目名称文本 */
.topicInfo .topicName .topicNameText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 题目课程信息 */
.topicInfo .courseInfoBox {
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topicInfo .courseInfoBox .courseInfo {
    margin-right: 20px;
    max-width: 240px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 信息标题 */
.topicInfo .courseInfoBox .title {
    font-size: 14px;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 信息内容 */
.topicInfo .courseInfoBox .competition,
.topicInfo .courseInfoBox .courseInfo .courseName,
.topicInfo .courseInfoBox .courseInfo .chapterName {
    border-radius: 25px;
    padding: 2px 10px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 185, 255, 1);
}

/* 题目难度 */
.topicDifficulty {
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    padding: 2px 10px;
    border-radius: 25px;
}

.topicDifficulty.simple {
    background-color: rgba(8, 191, 145, 1);
}

.topicDifficulty.medium {
    background-color: rgba(250, 172, 43, 1);
}

.topicDifficulty.difficulty {
    background-color: rgba(246, 70, 0, 1);
}

/* 题目类型 */
.topicType,
/* 题目正确率 */
.topicAccuracy,
/* 挑战次数 */
.topicChallengeNum {
    font-size: 14px;
}

/* 操作 */
.topicAction {
    padding: 5px 10px;
    font-size: 14px;
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 50px;
    transition: .3s all;
    cursor: pointer;
}

.topicInfo .courseInfoBox .courseInfo .courseName:hover,
.topicInfo .courseInfoBox .courseInfo .chapterName:hover,
.topicAction:hover {
    background-color: rgba(65, 185, 255, .8);
}

.topicInfo .courseInfoBox .courseInfo .courseName:active,
.topicInfo .courseInfoBox .courseInfo .chapterName:active,
.topicAction:active {
    background-color: rgba(65, 185, 255,.65);
    transition: .1s all;
}
</style>